<script lang="ts">
    import { getContext } from "svelte";
    import { Space } from "../Space";
    import { useClassList } from "../utils/useClassList";
    import type { BreadcrumbItemProps, BreadcrumbPropsContext } from "./Breadcrumb";
    import { BreadcrumbContextKey } from "./Breadcrumb.svelte";

    const props: BreadcrumbItemProps = $props();

    const classList = $derived(useClassList(props, "cm-breadcrumb-item"));
    const ctx: BreadcrumbPropsContext = getContext(BreadcrumbContextKey);
</script>

<span class="cm-breadcrumb-wrap">
    <a class={classList} href={props.link}>
        <Space size={4} align="center">
            {#if props.icon}
                {@render props.icon()}
            {/if}
            <span style="display: inline-flex;">{@render props.children?.()}</span>
        </Space>
    </a>
    <span class="cm-breadcrumb-separator">
        {#if typeof ctx.separator === "function"}
            {@render ctx.separator()}
        {:else}
            {ctx?.separator}
        {/if}
    </span>
</span>
